<template>
	<view class="conten">
		<image src="../../static/gao/background.png" class="backg"></image>
		<image src="../../static/gao/backdown.png" class="backd"></image>
		<text class="backt"> <b>生活缴费</b> </text>
		<view class="cirle_up">
			<image src="../../static/gao/circle_white.png" mode="" class="cirle1"></image>
			<image src="../../static/gao/water.png" class="water1"></image>
			<text class="watert">水费</text>
			<image src="../../static/gao/arrearage.png" class="arre"></image>
			<image src="../../static/gao/chara1.png" class="chara1"></image>
			<text class="arre1">{{msg}}</text>
			<image src="../../static/gao/transverse.png" class="tran"></image>
			<image src="../../static/gao/chara2.png" class="chara2"></image>
			<text class="arre2">{{name}}</text>
			<image src="../../static/gao/chara3.png" class="chara3"></image>
			<text class="arre3">{{name}}</text>
			<image src="../../static/gao/chara4.png" class="chara4"></image>
			<text class="arre4">{{name}}</text>
			<!-- 分割线 -->
			<image src="../../static/gao/transverse.png" class="tran1"></image>
			<image src="../../static/gao/chara5.png" class="chara5"></image>
			<button type="default" class="btn1" hover-class="btnh">20</button>
			<button type="default" class="btn2" hover-class="btnh">50</button>
			<button type="default" class="btn3" hover-class="btnh">100</button>
			<button type="default" class="btn4" hover-class="btnh">150</button>
			<button type="default" class="btn5" hover-class="btnh">200</button>
			<button type="default" class="btn6" hover-class="btnh">300</button>
			<image src="../../static/gao/money.png" mode="" class="money"></image>
			<input type="text" value="" placeholder="输入自定义金额" class="ipt" />
			<image src="../../static/gao/transverse.png" class="tran2"></image>
		</view>
		<view class="cirle_down">
			<image src="../../static/gao/circledown.png" mode="" class="img"></image>
			<image src="../../static/gao/circledown.png" mode="" class="img1"></image>
			<image src="../../static/gao/logo1.png" mode="" class="log1" ></image>
			<image src="../../static/gao/chara6.png" mode="" class="arre6" ></image>
			<image src="../../static/gao/logo2.png" mode="" class="log2" ></image>
			<image src="../../static/gao/chara7.png" mode="" class="arre7" ></image>
			<button type="default"  class="look1" >查看</button>
			<button type="default"  class="look2" >查看</button>
		</view>
		<view class="active">
			<button type="default" class="bton">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: "133",
				name: "王 *",
			}
		}
	}
</script>

<style>
	/* 背景 */
	.conten .backg {
		width: 750rpx;
		height: 786rpx;
	}

	/* 下面背景 */
	.conten .backd {
		width: 750rpx;
		height: 460rpx;
		margin-top: -10rpx;
	}

	/* 标题 */
	.conten .backt {
		color: #FFFFFF;
		font-size: 32rpx;
		position: absolute;
		top: 32rpx;
		left: 309rpx;
	}

	/* 白色圆框 */
	.conten .cirle_up .cirle1 {
		width: 690rpx;
		height: 869rpx;
		position: absolute;
		top: 100rpx;
		left: 30rpx;
	}

	/* 水滴图标 */
	.conten .cirle_up .water1 {
		width: 23rpx;
		height: 32rpx;
		position: absolute;
		top: 120rpx;
		left: 59rpx;
	}

	/* 水费小字 */
	.conten .cirle_up .watert {
		font-size: 23rpx;
		position: absolute;
		top: 120rpx;
		left: 90rpx;
	}

	/* 暂未查询到欠费 */
	.conten .cirle_up .arre {
		width: 333rpx;
		height: 47rpx;
		position: absolute;
		top: 180rpx;
		left: 207rpx;
	}

	/* 余额 */
	.conten .cirle_up .chara1 {
		width: 118rpx;
		height: 29rpx;
		position: absolute;
		top: 300rpx;
		left: 67rpx;
	}

	/* 余额数据 */
	.conten .cirle_up .arre1 {
		width: 51rpx;
		height: 24rpx;
		font-size: 24rpx;
		/* background-color: #007AFF; */
		position: absolute;
		top: 300rpx;
		left: 630rpx;
	}

	/* 分割线 */
	.conten .cirle_up .tran {
		width: 615rpx;
		height: 2rpx;
		position: absolute;
		top: 369rpx;
		left: 64rpx;
	}

	/* 入住人 */
	.conten .cirle_up .chara2 {
		width: 71rpx;
		height: 23rpx;
		position: absolute;
		top: 400rpx;
		left: 67rpx;
	}

	.conten .cirle_up .arre2 {
		width: 51rpx;
		height: 21rpx;
		font-size: 21rpx;
		/* background-color: #007AFF; */
		position: absolute;
		top: 402rpx;
		left: 630rpx;
	}

	/* 住址信息 */
	.conten .cirle_up .chara3 {
		width: 95rpx;
		height: 23rpx;
		position: absolute;
		top: 460rpx;
		left: 67rpx;
	}

	.conten .cirle_up .arre3 {
		width: 51rpx;
		height: 21rpx;
		font-size: 21rpx;
		/* background-color: #007AFF; */
		position: absolute;
		top: 460rpx;
		left: 630rpx;
	}

	.conten .cirle_up .chara4 {
		width: 95rpx;
		height: 23rpx;
		position: absolute;
		top: 523rpx;
		left: 67rpx;
	}

	.conten .cirle_up .arre4 {
		width: 51rpx;
		height: 21rpx;
		font-size: 21rpx;
		/* background-color: #007AFF; */
		position: absolute;
		top: 523rpx;
		left: 630rpx;
	}

	/* 分割线 */
	.conten .cirle_up .tran1 {
		width: 615rpx;
		height: 2rpx;
		position: absolute;
		top: 590rpx;
		left: 63rpx;
	}

	.conten .cirle_up .chara5 {
		width: 126rpx;
		height: 30rpx;
		position: absolute;
		top: 619rpx;
		left: 67rpx;
	}

	.conten .cirle_up button {
		width: 200rpx;
		height: 70rpx;
		background-color: #f1f1f1;
		border-radius: 20rpx;
		color: #9f9e9e;
		line-height: 70rpx;
	}

	.conten .cirle_up .btnh {
		color: #bbcbf0;
		background-color: #d4dcf0;
	}

	.conten .cirle_up .btn1 {
		position: absolute;
		top: 679rpx;
		left: 43rpx;
	}

	.conten .cirle_up .btn2 {
		position: absolute;
		top: 679rpx;
		left: 274rpx;
	}

	.conten .cirle_up .btn3 {
		position: absolute;
		top: 679rpx;
		left: 500rpx;
	}

	.conten .cirle_up .btn4 {
		position: absolute;
		top: 770rpx;
		left: 43rpx;
	}

	.conten .cirle_up .btn5 {
		position: absolute;
		top: 770rpx;
		left: 274rpx;
	}

	.conten .cirle_up .btn6 {
		position: absolute;
		top: 770rpx;
		left: 500rpx;
	}

	.conten .cirle_up .money {
		width: 30rpx;
		height: 34rpx;
		position: absolute;
		top: 870rpx;
		left: 67rpx;
	}

	.conten .cirle_up .ipt {
		position: absolute;
		left: 133rpx;
		top: 864rpx;
	}

	.conten .cirle_up .tran2 {
		width: 615rpx;
		height: 2rpx;
		position: absolute;
		top: 920rpx;
		left: 64rpx;
	}
	.conten .cirle_down .img {
		width: 688rpx;
		height: 113rpx;
		position: absolute;
		top: 990rpx;
		left: 31rpx;
	}

	.conten .cirle_down .img1 {
		width: 688rpx;
		height: 113rpx;
		position: absolute;
		top: 1125rpx;
		left: 31rpx;
	}
	.conten .cirle_down .log1{
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		top: 1000rpx;
		left: 46rpx;
	}
	.conten .cirle_down .arre6{
		width: 230rpx;
		height: 40rpx;
		position: absolute;
		top: 1026rpx;
		left: 149rpx;
	}
	.conten .cirle_down .log2{
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		top: 1134rpx;
		left: 46rpx;
	}
	.conten .cirle_down .arre7{
		width: 230rpx;
		height: 40rpx;
		position: absolute;
		top: 1155rpx;
		left: 149rpx;
	}
	.conten .cirle_down .look1{
		width: 112rpx;
		height: 50rpx;
		color: #007AFF;
		font-size: 26rpx;
		line-height: 50rpx;
		border: 1rpx solid #007AFF;
		position: absolute;
		top: 1019rpx;
		left: 567rpx;
	}
	.conten .cirle_down .look2{
		width: 112rpx;
		height: 50rpx;
		color: #007AFF;
		font-size: 26rpx;
		line-height: 50rpx;
		border: 1rpx solid #007AFF;
		position: absolute;
		top: 1145rpx;
		left: 567rpx;
	}
	.conten .active {
		width: 750rpx;
		height: 119rpx;
		position: fixed;
		bottom: 0rpx;
		background-color: #FFFFFF;

	}

	.conten .active .bton {
		color: #FFFFFF;
		width: 656rpx;
		height: 75rpx;
		line-height: 75rpx;
		border-radius: 50rpx;
		background-color: #5282f0;
		margin-top: 20rpx;
	}

</style>
